
<template>
  <div>
    <!-- 
    vue2 采用数据劫持的方式通过js中的方法 Object.defineProperty() 来劫持各个属性的setter和getter进而在数据发送变化时 触发对应的监听回调函数，完成响应式
    给对象新增属性时页面不会自动更新时
    给对象删除属性时页面不会自动更新
    直接通过下标修改数组时，页面不会自动更新
    数组：解决方案
        通过调用数组的内置方法进而更新视图
        $set方法
        this.$set(要修改的数组，索引值，要修改的数据)
        $set方法
        this.$set(要操作的对象，属性名，要新增的值)
        this.$delete(要操作的对象，要删除的属性名) -->
    <p>{{ obj }}</p>
    <p>{{ arr }}</p>
    <p>{{list}}</p>
    <button @click="add">对象添加</button>
    <button @click="add2">数组添加</button>
    <button @click="add3">对象添加age</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        one: 100,
        two: 200,
      },
      arr: [1, 2, 3],
      list:[
        {
            name:111,
            id:1
        },
        {
             name:222,
            id:2
        }
      ]
    };
  },
  methods: {
    add() {
      //   this.obj.three = 300;
      this.$set(this.obj, "three", 300);
      console.log(this.obj);
    },
    add2() {
    //   this.arr[0] = 1000;
      this.$set(this.arr, 0, 300);
    },
    add3(){
        for(let i = 0;i<this.list.length;i++){
            this.$set(this.list[i],'age',22)
            // this.list[i].age=22
        }
        console.log(this.list)
    }
  },
};
</script>

<style>
</style>